<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<title>订单信息列表</title>

<%@include file="/WEB-INF/views/commons/common.jsp" %>

<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/jquery-easyui/1.4.3/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap-dialog3/css/bootstrap-dialog.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/validation-engine/validationEngine.jquery.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/css/search-theme.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/layui-v2.3.0/layui/css/layui.css">


</head>
<body  data-grid="easyui">
	<div class="path"><span class="right-index">&gt;</span>  现在的位置：订单列表</div>
<div class="tab-content">
	<div style="height: 20px;"></div>
	<div class="layui-progress layui-progress-big" style="display: none;" lay-showPercent="yes" lay-filter="progressBar">
		<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
	</div>
	<div class="fold_ex">
		<h2 class="title-h2">
			<span style="width:100%;">
				<button type="button" class="btn search-btn" data-method="exportOrder"><i class="fa fa-download"></i>&nbsp;导出订单&nbsp;</button>
				<button type="button" class="btn search-btn" id="uploadOrder"><i class="fa fa-upload"></i>&nbsp;导入订单&nbsp;</button>
				
			</span>
			
			<a href="javascript:void(0);" class="hide-next-btn">收起</a>
		</h2>
		
		<div>
		<form action="#">
			<table class="search-table container">
				<tr>
					<td class="text-right col-xs-2">收件人姓名</td>
					<td class="col-xs-4">
						<input type="text" class="form-control" name="receiverName" value="" placeholder="支持模糊查询"/>
					</td>
					<td class="text-right col-xs-2">收件人电话</td>
					<td class="col-xs-4">
						<input type="text" class="form-control" name="receicerPhone" value="" placeholder="支持模糊查询"/>
					</td>
				</tr>
				<tr>
					<td class="text-right col-xs-2">订单编号</td>
					<td class="col-xs-4">
						<input type="text" class="form-control" name="orderNo" value="" placeholder="支持模糊查询"/>
					</td>
					<td class="text-right col-xs-2">订单日志状态</td>
					<td class="col-xs-4">
						<select name="logStatus" class="form-control">
							<option value="" selected="selected">请选择</option>
							 <c:forEach items="${logStatus}" var="state">
								<option value="${state.dicCode}">${state.dicName}</option>
							</c:forEach> 
						</select>
					</td>
				</tr>
				<tr>
					<td class="text-right col-xs-2">购买人姓名</td>
					<td class="col-xs-4">
						<input type="text" class="form-control" name="customerName" value="" placeholder="支持模糊查询"/>
					</td>
					<td class="text-right col-xs-2">购买人电话</td>
					<td class="col-xs-4">
						<input type="text" class="form-control" name="customerPhone" value="" placeholder="支持模糊查询"/>
					</td>
				</tr>
				<tr>
					<td class="text-right col-xs-2">订单创建时间起</td>
					<td class="col-xs-4"><input type="text" class="form-control"
						id="orderStartTime" name="orderStartTime" value=""
						onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'orderEndTime\')}'});"
						onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly" />
					</td>
					<td class="text-right col-xs-2">订单创建时间止</td>
					<td class="col-xs-4"><input type="text" class="form-control"
						id="orderEndTime" name="orderEndTime" value=""
						onFocus="WdatePicker({minDate: '#F{$dp.$D(\'orderStartTime\')}'});"
						onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly" />
					</td>
				</tr>
				<tr>
					<td class="text-right col-xs-2">付款时间起</td>
					<td class="col-xs-4"><input type="text" class="form-control"
						id="payStartTime" name="payStartTime" value=""
						onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'payEndTime\')}'});"
						onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly" />
					</td>
					<td class="text-right col-xs-2">付款时间止</td>
					<td class="col-xs-4"><input type="text" class="form-control"
						id="payEndTime" name="payEndTime" value=""
						onFocus="WdatePicker({minDate: '#F{$dp.$D(\'payStartTime\')}'});"
						onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly" />
					</td>
				</tr>
				<tr>
					<td class="text-right col-xs-2">收件人地址</td>
					<td class="col-xs-4" colspan="3">
						<input type="text" class="form-control" name="receiverAddress" value="" placeholder="支持模糊查询"/>
					</td>
				</tr>
			
				<tr>
					<td class="text-right col-xs-2"></td>
					<td class="text-right">
						<button type="button" class="btn search-btn" data-method="search"><i class="fa fa-search"></i>&nbsp;查询&nbsp;</button>
						<button type="button" class="btn search-btn" data-method="clear"><i class="fa fa-trash"></i>&nbsp;清空&nbsp;</button>
					</td>
				</tr>
			</table>
		</form>
		</div>

		<hr class="search-line"/>
		<table class="easyui-datagrid" >
			<thead>
				<tr>
					<th data-options="field:'orderId',checkbox:true">选择</th>
					<th data-options="field:'orderNo',width:20,align:'center'">订单编号</th>
					<th data-options="field:'orderSource',width:20,align:'center'">订单来源</th>
					<th data-options="field:'receiverName',width:40,align:'center'">收件人姓名</th>
					<th data-options="field:'receiverPhone',width:50,align:'center'">收件人电话</th>
					<th data-options="field:'orderCreateTime',width:50,align:'center'">订单创建时间</th>
				</tr>
			</thead>
		</table>
	</div>
</div>

<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>


<script type="text/javascript" src="${base_href}/static/ui-frame/iframe-auto-height/jquery.autoheight.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap/3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap-dialog3/js/bootstrap-dialog.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/easyui.util.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/layui-v2.3.0/layui/layui.js"></script>

<script type="text/javascript" src="${base_href}/static/ui-frame/requirejs/2.2.0/require.js"></script>

<script type="text/javascript">
requirejs.config({
	baseUrl: '<c:url value="/static/"/>',
	paths: {
		Grid: 'component/grid/js/ms-grid',
	},
	config: {
		'Grid': { contextPath: '<c:url value="/"/>' },
	}
});

require(['Grid'], function(Grid) {
	Grid.columns({
		orderNo: {
			formatter: function(value, row, index) { 
				var v = value == null ? "" : $('<div/>').text(value).html();
				return "<a href='javaScript:void(0);' onclick=\"grid.orderNo(event, " + index + ")\" class='grid-button' plain='true' title='"+ v +"'><div>" +  v + "</div></a>";
			},
			event: function(event, index) {
				var row = this.grid.datagrid('getRows')[index];
				var param = {id: row.orderId};
				
				var url = basePath + "/order/readPage.html?" + $.param(param);
				var screenLocation = "width=800px,height=700px,top=0,left=0,menubar=yes,resizable=yes,scrollbars =yes";
				this.windowOpen(url, "详细信息",screenLocation);
				event.stopPropagation();
			}
		}
	});
	Grid.methods({
		create:function(){
			var url = basePath + "/question/draft";
			var screenLocation = "width=800px,height=700px,top=0,left=0,menubar=yes,resizable=yes,scrollbars =yes";
			this.windowOpen(url, "详细信息",screenLocation);
			
		}
		, exportOrder:function(){
			var iframe;
			var array = $("form").serializeArray();
			var _queryParams = {};
			for (var i = 0; i < array.length; i++) {
				_queryParams[array[i].name] = array[i].value.trim();
			}
			var url = basePath+"/orderList/download?" + $.param(_queryParams);
			if (iframe) {
				iframe.src = url;
			}
			else {
				iframe = document.createElement('iframe');
				iframe.src = url;
				iframe.style.display = "none";
				document.body.appendChild(iframe);
			}
		}
	});
	$(function() {
		layui.use(['upload','element','layer'], function(){
			var url = basePath + "/order/uploadOrders";
			var upload = layui.upload,element = layui.element,layer = layui.layer;
			upload.render({
				  elem: '#uploadOrder'
				, url: url
				, accept: 'file'
				, exts: 'xls|xlsx'
				, progress: function(e , percent) {
					console.log("进度：" + percent + '%');
					element.progress('progressBar',percent + '%');
					if(percent = 100){
						layer.msg("上传完毕，正在解析数据，请稍等片刻");
					}
				}
				, before: function(){
					$(".layui-progress").show();
				}
				, done: function(res, index, upload){
					//假设code=2000代表上传成功
					if(res.code == 2000){
						layer.msg(res.message)
						$("button[data-method='search']").click();
					}
					else{
						layer.alert(res.message)
					}
					$(".layui-progress").hide();
					$(".layui-progress-bar").attr("lay-percent","0%")
				}
				, error:function(a,b,c){
					console.log(a);
					console.log(b);
					console.log(c);
					layer.alert("上传失败，请联系管理员")
				}
			})
		});
		$('.easyui-datagrid').datagrid({
			rowStyler:function(index,row){
				if (row.orderLogStatus == 2){
					return 'background-color:#ffff00a3;font-weight:bold;';
				}
				if(row.orderLogStatus == 3){
					return 'background-color:#30c05c;font-weight:bold;';
				}
			}
		});
		window.grid = Grid.events();
	})
}) 
</script>


</body>
</html>
